Lecture 6: Deployment & Media Tags

1. Deployment Basics

Deployment is the process of putting your website online so others can access it. Popular platforms include GitHub Pages, Netlify, and Vercel.

1. Push your project to GitHub.
2. Connect repository with a hosting service.
3. Deploy and get a live link.

2. The <img> Tag

Used to display images on a webpage.

<img src="image.jpg" alt="Description of image" width="300">

• src → file path or URL of the image.
• alt → alternative text for screen readers or if image fails.
• width, height → size of the image.

3. The <audio> Tag

Used to embed audio files (like mp3) into webpages.

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

• controls → shows play/pause buttons.
• autoplay → starts automatically.
• loop → repeats the audio.

4. The <video> Tag

Used to embed video files (like mp4) into webpages.

<video width="400" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

• controls → displays video controls.
• autoplay → plays video automatically.
• muted → starts video with no sound.
• loop → repeats video continuously.

5. Accessibility

To make media accessible:

• Always include alt for images.
• Provide captions/subtitles for videos.
• Add transcripts for audio files.